<template>
    <div id="jx-header">
        <el-row class="jx-header">
            <el-col :span="4">
                <div class="jx-header-logo">
                    <img src="./../assets/images/logo2.png" />
                    <span>教学实验系统</span>
                </div>
            </el-col>
            <el-col :span="16" style="padding-left:40px;">
                <el-col :span="24" class="jx-header-nav">
                    <el-menu :default-active="activeIndex" mode="horizontal" :router="true">
                        <el-menu-item index="/index"><i class="iconfont icon-shouye"></i>首 页</el-menu-item>
                        <!-- <el-menu-item index="/MyCourses"><i class="iconfont icon-shubijiben"></i>我的课程</el-menu-item> -->
                        <el-menu-item index="/CreativeCourse"><i class="iconfont icon-fanganzhizuo_huaban"></i>创作课程</el-menu-item>
                        <el-menu-item index="/EnvironmentalTraining"><i class="iconfont icon-computer"></i>环境实训</el-menu-item>
                        <el-menu-item index="/TeachingStatistics"><i class="iconfont icon-tongji"></i>教学统计</el-menu-item>
                        <el-menu-item index="/FileCheck"><i class="iconfont icon-kehuchazhong"></i>文件查重</el-menu-item>
                    </el-menu>
                </el-col>
            </el-col>
            <el-col :span="4">
                <!-- <div class="jx-login">
                    登录
                </div> -->
                <div class="jx-login-info-box">
                    <div class="jx-login-info-avatar-box">
                        <el-dropdown trigger="click">
                            <div class="jx-login-info-avatar">
                                <img src="./../assets/images/re-excel.png" />
                            </div>
                            <el-dropdown-menu style="" slot="dropdown">
                                <el-dropdown-item command="a"><i class="iconfont icon-geren"></i>个人设置</el-dropdown-item>
                                <el-dropdown-item command="b"><i class="iconfont icon-xiaoxi"></i>消息管理</el-dropdown-item>
                                <el-dropdown-item command="c"><i class="iconfont icon-shenqing"></i>申请账号</el-dropdown-item>
                                <el-dropdown-item command="e" divided><i class="iconfont icon-tuichufffpx"></i>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <i class="iconfont icon-notice"></i>
                    <i class="iconfont icon-wenti-m"></i>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '/index',
            }
        },
        created() {
            let self = this
            self.fetchDate()
        },
        methods: {
            fetchDate() {
                let self = this
                var cur_path = this.$route.matched[1].path; //获取当前路由
                var routers = this.$router.options.routes; // 获取路由对象
                var nav_type = "/student/index", nav_name = "/student/index";
                // console.log(cur_path)
                // for (var i = 0; i < routers.length; i++) {
                //     var children = routers[i].children;
                //     if(children){
                //         for (var j = 0; j < children.length; j++) {
                //             if (children[j].path === cur_path) {
                //                 nav_type = routers[i].type;
                //                 nav_name = routers[i].name;
                //                 break;
                //             }
                //         }
                //     }
                // }
            }
        },
        watch: {
            "$route": "fetchDate"
		}
    }
</script>

<style lang="scss">
    .el-dropdown{
        display: block;
    }
    .el-dropdown-menu{
        .el-dropdown-menu__item{
            i{
                font-size: 12px;
                margin-right: 8px;
            }
        }
    }
    #jx-header{
        overflow: hidden;
        height: 60px;
        line-height: 60px;
    }
    .jx-header{
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #070e28;
        text-align: left;
        position: fixed;
        z-index: 10;
        .jx-header-logo{
            margin-left: 43px;
            img{
                float: left;
                padding: 15px 0;
            }
            span{
                float: left;
                font-size: 18px;
                color: #fff;
                border-left: solid 1px #fff;
                margin: 22px 0 22px 17px;
                padding-left: 17px;
                line-height: 1;
            }
        }
        .jx-login{
            font-size: 14px;
            color: #fff;
            text-align: right;
            padding-right: 40px;
            cursor: pointer;
        }
        .jx-header-nav{
            .el-menu--horizontal{
                background: none;
                border: none;
                &>.el-menu-item{
                    &.is-active{
                        border-bottom: none;
                        background: rgba(255,255,255,0.1);
                    }
                }
                &>.el-menu-item:not(.is-disabled):focus, &>.el-menu-item:not(.is-disabled):hover{
                    border-bottom: none;
                    background: rgba(255,255,255,0.1);
                }
                .el-menu-item{
                    width: 10%;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    border-bottom: none;
                    i{
                        font-size: 14px;
                        color: #fff;
                        vertical-align: middle;
                        margin-right: 13px;
                    }
                }
            }
        }
        .jx-login-info-box{
            .jx-login-info-avatar-box{
                float: right;
                width: 30px;
                height: 30px;
                margin: 14px 39px 0 0;
            }
            .jx-login-info-avatar{
                width: 30px;
                height: 30px;
                border-radius: 20px;
                overflow: hidden;
                cursor: pointer;
            }
            i{
                float: right;
                font-size: 18px;
                color: #fff;
                margin-right: 20px;
            }
        }
    }
</style>
